<script lang="ts" setup>
import type { AdminDepartmentApi } from '#/api/edu/base/adminDepartment';

import { onMounted, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { Button, Card, Col, message, Result, Row } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import {
  createAdminDepartment,
  getAdminDepartment,
  updateAdminDepartment,
} from '#/api/edu/base/adminDepartment';
import { useDescription } from '#/components/description';
import { $t } from '#/locales';

import { useDetailSchema, useFormSchema } from './data';

const loading = ref(false);
const formData = ref<AdminDepartmentApi.AdminDepartment>();
const desensitize = ref(true);
async function handleDesensitize() {
  desensitize.value = !desensitize.value;
  const data = await getAdminDepartment(formData.value.id, desensitize.value);
  formData.value = data;
}
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 100,
  },
  wrapperClass: 'grid-cols-1',
  layout: 'horizontal',
  schema: useFormSchema(),
  handleSubmit: handleSave,
  showDefaultActions: false,
});
const [Descriptions] = useDescription({
  bordered: false,
  size: 'middle',
  column: 1,
  labelWidth: 160,

  schema: useDetailSchema(),
});
const isEdit = ref(false);
async function getInfo() {
  const data = await getAdminDepartment(formData.value?.id, desensitize.value);
  // 设置到 values
  formData.value = data;
  if (isEdit.value) {
    await formApi.setValues(formData.value);
  }
}

function handleEdit() {
  desensitize.value = false;
  isEdit.value = true;
  getInfo();
}
async function handleClose() {
  await formApi.setValues(formData.value);
  isEdit.value = false;
}
async function handleReset() {
  await formApi.setValues(formData.value);
}
async function handleSave() {
  const { valid } = await formApi.validate();
  if (!valid) {
    return;
  }
  // 提交表单
  loading.value = true;
  const data =
    (await formApi.getValues()) as AdminDepartmentApi.AdminDepartment;
  try {
    await (formData.value?.id
      ? updateAdminDepartment(data)
      : createAdminDepartment(data));
    // 关闭并提示
    message.success($t('ui.actionMessage.operationSuccess'));
    isEdit.value = false;
    getInfo();
  } finally {
    loading.value = false;
  }
}

// 初始加载配置
onMounted(() => {
  getInfo();
});
</script>

<template>
  <Row :gutter="24" class="mt-4">
    <Col span="7" />
    <Col span="10" v-if="formData?.id">
      <Card title="教育行政部门信息" v-if="isEdit">
        <Form class="mx-4" />
        <div class="flex justify-end">
          <Button type="default" @click="handleClose" class="mr-2">
            关闭
          </Button>
          <Button type="default" @click="handleReset" class="mr-2">
            重置
          </Button>
          <Button type="primary" @click="handleSave" class="mr-2">
            保存
          </Button>
        </div>
      </Card>
      <Descriptions
        title="教育行政部门信息"
        :data="formData"
        v-else
        class="mx-4"
      >
        <template #extra>
          <Button type="primary" @click="handleEdit" class="mr-2">
            编辑
          </Button>
          <Button
            type="default"
            @click="handleDesensitize"
            :danger="desensitize"
            v-if="!isEdit"
          >
            <IconifyIcon
              :icon="
                desensitize
                  ? 'ant-design:eye-filled'
                  : 'ant-design:eye-invisible-filled'
              "
            />
            {{ desensitize ? '关闭脱敏' : '启用脱敏' }}
          </Button>
        </template>
      </Descriptions>
    </Col>
    <Col span="10" v-else>
      <Card>
        <Result
          status="warning"
          title="当前部门未被启用，无法操作，请联系系统管理员配置"
        />
      </Card>
    </Col>
    <Col span="7" />
  </Row>
</template>
